<!--
 * @Author: sxb
 * @Email: sxb@mail.com
 * @Date: 2020-05-25 10:12:52
 * @Descripttion: 
--> 
<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" align="right">
        <el-button type="primary" @click="onCreate">+ 新增定时提醒</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="消息类型" width="200">
      </el-table-column>
      <el-table-column prop="province" label="消息内容">
      </el-table-column>
      <el-table-column prop="date" label="目标用户" width="120">
      </el-table-column>
      <el-table-column prop="city" label="推送类型" width="100">
      </el-table-column>
      <el-table-column prop="address" label="设定时间" width="140">
      </el-table-column>
      <el-table-column prop="look" label="发布状态" width="100">
        <template slot-scope="scope">                    
          <span v-if="scope.row.look == true">已发布</span>
          <span v-if="scope.row.look == false">待发布</span>              
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button  v-if="scope.row.look == false" @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      style="margin-top: 8px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="10"
    ></el-pagination>
    <!--编辑定时模板-->
    <el-dialog title="定时提醒" :visible.sync="dialogFormVisible" width="500px">
        <el-form label-width="80px" :model="form" ref="provinceForm">
          <el-form-item label="消息类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择" @change="typeChange" style="width: 370px;">
              <el-option v-for="item in selTypeData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="消息内容">
            <p style="width: 370px">{{messageContent}}</p>
          </el-form-item>
          <el-form-item label="目标用户">
            <template>
              <el-radio v-model="userType" label="1">全部用户</el-radio>
              <el-radio v-model="userType" label="2" v-if="selectedType.id == 1">未填报月度用户</el-radio>
              <el-radio v-model="userType" label="3" v-if="selectedType.id == 2">未填报日前用户</el-radio>            
            </template>
          </el-form-item>
          <el-form-item label="推送类型">
            <el-radio-group v-model="sendType" @change="sendTypeChange">
              <el-radio label="1">仅此一次</el-radio>
              <el-radio label="2">每月定时推送</el-radio>          
            </el-radio-group>
          </el-form-item>
          <el-row>
            <el-col style="margin: 10px">
              <template>
                <el-radio v-if="sendType == 1" v-model="sendTypeDetail" label="1">立即推送</el-radio>
                <el-radio v-if="sendType == 1" v-model="sendTypeDetail" label="2">&nbsp;</el-radio>
                <el-date-picker v-if="sendType == 1" v-model="sendDatetime" type="datetime" placeholder="选择日期时间" style="margin-left: -30px"></el-date-picker>
                <el-date-picker v-if="sendType == 2" v-model="sendDatetime" type="datetime" placeholder="选择日期时间" format="dd HH:mm:ss"></el-date-picker>          
              </template>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dialogFormVisible: false,
        userType: '1',
        sendType: '1',
        sendTypeDetail: '1',
        sendDatetime: '',
        messageContent: '尊敬的客户您好，为了更好的服务贵单位参与代理购电，请您在本月10日之前申报下月预估电量和上月实际电量使用情况，如已申报请忽略。',
        selectedType: {id: 1},
        selTypeData:[{
            id: 1,
            name: '申报下月电量',
            content: '尊敬的客户您好，为了更好的服务贵单位参与代理购电，请您在本月10日之前申报下月预估电量和上月实际电量使用情况，如已申报请忽略。'
        },{
            id: 2,
            name: '申报日前电量',
            content: '尊敬的客户您好，为了更好的服务贵单位参与代理购电，请您在明日8点前申报XX号预估用电量。'
        }],
        tableData: [{
          id: '1',
          date: '全部用户',
          name: '申报下月电量',
          province: '尊敬的客户您好，为了更好的服务贵单位参与代理购电，请您在本月10日之前申报下月预估电量和上月实际电量使用情况，如已申报请忽略。',
          city: '仅此一次',
          address: '2020-04-09 08:30',
          zip: '张XX',
          look: true
        }, {
          id: '2',
          date: '未填报月度用户',
          name: '申报日前电量',
          province: '尊敬的客户您好，为了更好的服务贵单位参与代理购电，请您在明日8点前申报XX号预估用电量。',
          city: '每月定时提醒',
          address: '2020-04-09 08:30',
          zip: '张XX',
          look: true
        }, {
          id: '3',
          date: '未填报日前用户',
          name: '申报下月电量',
          province: '尊敬的客户您好，为了更好的服务贵单位参与代理购电，请您在本月10日之前申报下月预估电量和上月实际电量使用情况，如已申报请忽略。',
          city: '仅此一次',
          address: '2020-04-09 08:30',
          zip: '张XX',
          look: false
        }, {
          id: '4',
          date: '全部用户',
          name: '五一放假通知',
          province: '尊敬的客户您好，五一假期即将来临，国晶新能源温馨提示您：疫情还未结束，为了您的健康，五一期间提倡在市内活动，尽量减少出行，祝您及家人健康快乐！',
          city: '每月定时提醒',
          address: '2020-04-09 18:00',
          zip: '张XX',
          look: false
        }, {
          id: '2',
          date: '未填报月度用户',
          name: '申报日前电量',
          province: '尊敬的客户您好，为了更好的服务贵单位参与代理购电，请您在明日8点前申报XX号预估用电量。',
          city: '每月定时提醒',
          address: '2020-04-09 08:30',
          zip: '张XX',
          look: true
        }, {
          id: '3',
          date: '未填报日前用户',
          name: '申报下月电量',
          province: '尊敬的客户您好，为了更好的服务贵单位参与代理购电，请您在本月10日之前申报下月预估电量和上月实际电量使用情况，如已申报请忽略。',
          city: '仅此一次',
          address: '2020-04-09 08:30',
          zip: '张XX',
          look: false
        }, {
          id: '4',
          date: '全部用户',
          name: '五一放假通知',
          province: '尊敬的客户您好，五一假期即将来临，国晶新能源温馨提示您：疫情还未结束，为了您的健康，五一期间提倡在市内活动，尽量减少出行，祝您及家人健康快乐！',
          city: '每月定时提醒',
          address: '2020-04-09 18:00',
          zip: '张XX',
          look: false
        }, {
          id: '2',
          date: '未填报月度用户',
          name: '申报日前电量',
          province: '尊敬的客户您好，为了更好的服务贵单位参与代理购电，请您在明日8点前申报XX号预估用电量。',
          city: '每月定时提醒',
          address: '2020-04-09 08:30',
          zip: '张XX',
          look: true
        }, {
          id: '3',
          date: '未填报日前用户',
          name: '申报下月电量',
          province: '尊敬的客户您好，为了更好的服务贵单位参与代理购电，请您在本月10日之前申报下月预估电量和上月实际电量使用情况，如已申报请忽略。',
          city: '仅此一次',
          address: '2020-04-09 08:30',
          zip: '张XX',
          look: false
        }, {
          id: '4',
          date: '全部用户',
          name: '五一放假通知',
          province: '尊敬的客户您好，五一假期即将来临，国晶新能源温馨提示您：疫情还未结束，为了您的健康，五一期间提倡在市内活动，尽量减少出行，祝您及家人健康快乐！',
          city: '每月定时提醒',
          address: '2020-04-09 18:00',
          zip: '张XX',
          look: false
        }],
        form: {
          name: '',
          type: 1,
          content: ''
        }
      }
    },
    methods: {
      typeChange(val){
        this.selTypeData.forEach(element => {
          if(element.id == val){
            this.selectedType = element;
          }  
        }); 
        this.messageContent = this.selectedType.content;
      },
      sendTypeChange(val){
        console.log('sendTypeChange');
        console.log(this.sendType);
      },
      onCreate() {
        this.dialogFormVisible = true;
      },
      submitForm(){
        this.dialogFormVisible = false;
      },
      handleClick(row) {
        console.log(row);
      },
      handleSizeChange(val) {
      },
      handleCurrentChange(val) {
      }
    }
  }
</script>
<style scoped lang="scss">
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>